<template>
  <!--   <el-affix :offset="120">
    <el-button type="primary">Offset top 120px</el-button>
  </el-affix> -->
  <!-- 推荐一行 -->
  <el-affix :offset="0" >
    <div class="recommend_list">
    <!-- 兴趣技能 -->
    <div class="recommend_list_left"  >
      <!-- tabs     <el-tab-pane label="User" name="first">User</el-tab-pane>-->
      <!-- <el-tabs v-model="isFalse" class="demo-tabs" @tab-click="handleClick" >
        <el-tab-pane :label="item.isFalse" name="first" v-for="(item,index) in isFalse" :key="item.id">User</el-tab-pane>
 
      </el-tabs> -->
      <!--  -->
      <ul class="menu" > 
        <li :class="isTrue.id == item.id? 'active': ''" v-for="(item,index) in isFalse" :key="item.id" 
         style="line-height: 40px;
         margin: 0 5%;"
        >
          <el-button type="" size="large" @click="isSwitch(item.id)" link  v-loading.fullscreen.lock="fullscreenLoading" >{{item.name}}</el-button>
        </li>
      </ul>
    </div>
    <!-- 兴趣技能 -->
    <div class="recommend_list_right">
      <svg
        t="1666196026123"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1795"
        width="14"
        height="14"
      >
        <path
          d="M127.045251 235.759324c-62.631527 0-113.042268-52.447539-113.042267-117.625062S64.922924 0.509199 127.045251 0.509199c62.631527 0 113.042268 52.447539 113.042268 117.625063 0 64.668324-50.410741 117.115863-113.042268 117.625062zM127.045251 627.333665c-62.631527 0-113.042268-52.447539-113.042267-117.625062s50.91994-117.625062 113.042267-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM127.045251 1018.908006c-62.631527 0-113.042268-52.447539-113.042267-117.625062 0-64.668324 50.91994-117.625062 113.042267-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 235.250124c-62.631527 0-113.042268-52.447539-113.042268-117.625062C398.957732 52.956738 449.877673 0 512 0c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 627.333665c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.91994-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 1018.908006c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.91994-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM896.954749 240.342118c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 632.425659c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.410741-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 1024c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062z"
          p-id="1796"
        ></path>
      </svg>
      <el-button
        type="type"
        size="large"
        @click="setInterest"
        link
        style="font-size: 17px; margin-top: -7px"
        >选择兴趣技能</el-button
      >
    </div>
    <!-- 兴趣技能弹出框 -->
    <!-- 选着我的兴趣技能 1/7 -->
    <el-dialog
    
      v-if="isSearch"
      v-model="dialogVisible"
      :title="
        addDanceItem.length > 0
          ? `选着我的兴趣技能 ${addDanceItem.length}/7`
          : '可以选择的兴趣技能'
      "
      width="1024px"
      :before-close="handleClose"
    >
      <p style="margin-top: -25px; margin-left: 10px">例如舞蹈就选舞种</p>
      <!-- 搜索 -->
      <div>
        <el-form :inline="true" style="margin: 25px 10px">
          <el-form-item>
            <el-input
              v-model="input1"
              class="w-50 m-2"
              size="large"
              placeholder="搜索兴趣技能"
              :prefix-icon="Search"
              @input="toDanceItem"
            />
          </el-form-item>
          <el-form-item>
            <!--                                                 -->
            <el-button
              size="large"
              @click="toDanceItem"
              :disabled="!input1.length"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!--  -->
      <div>
          <!-- <el-badge value="x" class="item"  @click.self="handler"> -->
                       <!--        <el-button
          value="x"
          size="large"
          @click="deleteId(addDance.id)"
          style="margin: 10px 10px"
          v-for="(addDance, index) in addDanceItem"
          :key="addDance.id"
          >{{ addDance.name }}</el-button
        >      
                        </el-badge> -->
        <el-button
          value="x"
          size="large"
          @click="deleteId(addDance.id)"
          style="margin: 10px 10px"
          v-for="(addDance, index) in addDanceItem"
          :key="addDance.id"
          >{{ addDance.name }}</el-button
        >
      <!-- </el-badge> -->
        <div style="margin: 25px 10px">推荐兴趣技能</div>
          <el-button 
          size="large"
          @click="addDance(item.id)"
          v-for="(item, index) in danceList"
          :key="item.id"
          style="margin: 10px 10px"
          >{{ item.name }}</el-button
        >

      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" type="large"
            >取消</el-button
          >
          <el-button color="#f93684" type="large" @click="determine"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 搜索内容框 -->
    <el-dialog
      v-else
      v-model="dialogVisible"
      title=""
      width="1024px"
      :before-close="handleClose"
    >
      <!-- isSearch = true -->
      <el-button
        size="large"
        @click="isSearchTrue"
        :icon="ArrowLeftBold"
        style="margin-top: -70px"
        >返回</el-button
      >
      <!-- 搜索 -->
      <div>
        <el-form :inline="true" style="margin-left: 10px">
          <el-form-item style="margin-top: 20px">
            <el-input
              v-model="input1"
              class="w-50 m-2"
              size="large"
              placeholder="搜索兴趣技能"
              :prefix-icon="Search"
            />
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              size="large"
              @click="toDanceItem"
              :disabled="!input1.length"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 点击删除 -->
      <span style="color: #b1b5c1; font-size: 14px; margin: 10px 10px"
        >历史搜索</span
      >
      <el-button type="primary" size="default" @click="" link>
        <svg
          t="1666249083464"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5844"
          width="14"
          height="14"
        >
          <path
            d="M861.184 192.512q30.72 0 50.688 10.24t31.744 25.6 16.384 33.28 4.608 33.28q0 7.168-0.512 11.264t-0.512 7.168l0 6.144-67.584 0 0 537.6q0 20.48-8.192 39.424t-23.552 33.28-37.376 23.04-50.688 8.704l-456.704 0q-26.624 0-50.176-8.192t-40.448-23.04-26.624-35.84-9.728-47.616l0-527.36-63.488 0q-1.024-1.024-1.024-5.12-1.024-5.12-1.024-31.744 0-13.312 6.144-29.696t18.432-30.208 31.744-23.04 46.08-9.216l91.136 0 0-62.464q0-26.624 18.432-45.568t45.056-18.944l320.512 0q35.84 0 49.664 18.944t13.824 45.568l0 63.488q21.504 1.024 46.08 1.024l47.104 0zM384 192.512l320.512 0 0-64.512-320.512 0 0 64.512zM352.256 840.704q32.768 0 32.768-41.984l0-475.136-63.488 0 0 475.136q0 21.504 6.656 31.744t24.064 10.24zM545.792 839.68q17.408 0 23.552-9.728t6.144-31.232l0-475.136-63.488 0 0 475.136q0 40.96 33.792 40.96zM738.304 837.632q18.432 0 24.576-9.728t6.144-31.232l0-473.088-64.512 0 0 473.088q0 40.96 33.792 40.96z"
            p-id="5845"
            fill="#8a8a8a"
          ></path>
        </svg>
      </el-button>

      <div>
        <el-badge value="x" class="item" @click.self="handler">
          <el-button
            size="large"
            @click=""
            style="margin: 10px 10px"
            v-for="(China, index) in history"
            :key="China.id"
            >{{ China.name }}</el-button
          >
        </el-badge>

        <div style="margin: 25px 10px">搜索结果</div>
        <!-- <el-button  size="large" @click="" v-for="(item,index) in danceList" :key="item.id" style="margin:10px 10px">{{item.name}}</el-button> -->
        <div
          class="disSvg"
          v-for="(resultItem, index) in addResult"
          :key="resultItem.id"
          @click="addChina(resultItem.id)"
        >
          <div style="display: flex">
            <div
              style="
                width: 44px;
                height: 44px;
                text-align: center;
                overflow: hidden;
                margin-top: 20px;
                margin-left: 10px;
              "
            >
              <svg
                t="1666231119072"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3683"
                width="30"
                height="30"
              >
                <path
                  d="M881.664 132.096c-69.632-69.632-167.936-97.28-263.168-75.776-22.528 5.12-35.84 26.624-30.72 49.152s26.624 35.84 49.152 30.72c67.584-15.36 137.216 4.096 186.368 53.248C926.72 292.864 926.72 460.8 823.296 563.2L512 875.52 199.68 564.224c-102.4-103.424-102.4-271.36 0-373.76 77.824-77.824 204.8-77.824 282.624 0l69.632 69.632c8.192 8.192 77.824 76.8 150.528 76.8h5.12c30.72-1.024 57.344-15.36 77.824-39.936 14.336-17.408 11.264-43.008-6.144-57.344-17.408-14.336-43.008-11.264-57.344 6.144-6.144 8.192-12.288 9.216-17.408 10.24-26.624 2.048-70.656-29.696-93.184-53.248L541.696 133.12c-109.568-109.568-288.768-109.568-399.36 0C7.168 268.288 7.168 487.424 142.336 622.592L483.328 962.56c8.192 8.192 18.432 12.288 28.672 12.288 10.24 0 20.48-4.096 28.672-12.288l340.992-340.992c65.536-65.536 101.376-152.576 101.376-244.736 0-92.16-35.84-179.2-101.376-244.736z"
                  fill="#333C4F"
                  p-id="3684"
                ></path>
                <path
                  d="M240.64 233.472c-33.792 30.72-50.176 76.8-50.176 136.192 0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96c0-34.816 8.192-60.416 23.552-74.752 18.432-17.408 44.032-16.384 46.08-16.384 22.528 2.048 41.984-15.36 44.032-37.888 2.048-22.528-15.36-41.984-37.888-44.032-7.168-1.024-63.488-4.096-107.52 36.864z"
                  fill="#333C4F"
                  p-id="3685"
                ></path>
              </svg>
            </div>
            <div style="width: 196px">
              <p
                style="
                  color: #111;
                  font-size: 20px;
                  height: 22px;
                  line-height: 40px;
                  margin-left: 15px;
                "
              >
                {{ resultItem.name }}
              </p>
              <span class="spanAss">{{ resultItem.description }}</span>
            </div>
            <!-- 加号 -->
            <div style="margin-top: 25px; margin-left: 9px">
              <svg
                t="1666232918428"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4823"
                width="20"
                height="20"
              >
                <path
                  d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                  p-id="4824"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- <smallVideo v-for="(item,index) in quantity" :key="index"></smallVideo>
    <el-button type="primary" size="large" @click="addMore" style="margin:10px 48%">加载跟多</el-button> -->
  </div>
  </el-affix>
  <!-- <smallVido1></smallVido1> -->
  <smallVideo v-if="isCut" v-for="(item,index) in quantity" :key="index"></smallVideo>
  <smallVideo v-else v-for="(list,index) in quantity" :key="list"></smallVideo>
    <el-button type="primary" size="large" @click="addMore" style="margin:10px 48%">加载跟多</el-button>
  <!-- 一个个小视频的 -->
  <!-- 点击 推荐等的时候要保持主页不动下面的主件切换 -->
</template>

<script setup>

import { onMounted, ref } from "vue";
import * as _ from 'lodash'
import {
  getInterest,
  getSearch,
  getHistory,
} from "../../../api/recommend/index";
import smallVideo from '../../../layout/videos/index.vue'
import smallVido1 from '../../../layout/videos1/index.vue'
import { ElLoading, ElMessage } from 'element-plus'
import { ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { Plus, ArrowLeftBold } from "@element-plus/icons-vue";
const fullscreenLoading = ref(false)
// 切换页面
const isCut = ref(true)
// 视频量加一
const quantity = ref('1')
// 推荐数据假数据
const isFalse = ref([
  {
    name:'推荐',
    id:'01'
  },
  {
    name:'作品',
    id:'02'
  },
  {
    name:'教程',
    id:'03'
  },
  {
    name:'专题',
    id:'04'
  },
  {
    name:'动态',
    id:'05'
  },
  {
    name:'关注',
    id:'06'
  },
])
// 点击兴趣弹出对话框
const dialogVisible = ref(false);
// 搜索内容框和二级窗口谁存在
const isSearch = ref(true);
// 存储舞蹈品种
const danceList = ref([]);
// 搜集兴趣爱好搜索框输入内容
const input1 = ref("");
// 搜集点击技能时添加到我的
const addDanceItem = ref([]);
// 搜集二级对话框下的搜索结果数据
const addResult = ref([]);
// 点击兴趣技能 弹出对话框
// 历史搜索
const history = ref([]);
// 定时器
const timer = ref(null)
// 菜单栏样式判断
const isTrue = ref([
 
])
// 点击兴趣技能回调

const setInterest = async () => {
  dialogVisible.value = true;

  const result = await getInterest(10,50);
  // console.log(result);

  danceList.value = result.data.content;
};

// 点击某个推荐技能添加到我的兴趣技能
const addDance = (id) => {
  if(isFalse.value.length >13){
    return
  }
  // 最多七个
  if(addDanceItem.value.length >6){
    ElMessage({
      type:'warning',
      message:'最多添加七个'
    })
    return
  }
  // 判断有没有添加过如果有 不要重复添加
  

   const addId = danceList.value.find((item) => item.id === id);
   const addDan = addDanceItem.value.find(item=>item.id === addId.id)
  //  console.log(addDan);
   if(addDan){
    ElMessage({
      type:'warning',
      message:'已经添加过'
    })
    return
   }
  // console.log(addId);
  // 根据id判断点击的谁 push到addDanceItem
  // 在判断他是否存在如果存在 不让他再次出去
  addDanceItem.value.push(addId);
  isFalse.value.push(addId)
};
// 点击我选择的技能 删除 /*有瑕疵,是根据下表删除，没有下标*/
const deleteId = (id) => {
  // 点击某个爱好删除
  // 获取 点击的爱好

  const appId = addDanceItem.value.find((item) => item.id === id);
  console.log(appId);
  // 
  addDanceItem.value.forEach((item,index,arr)=>{
      if(item === appId){
        addDanceItem.value.splice(index, 1);
      }
   })
   isFalse.value.forEach((item,index,arr)=>{
    if(item === appId){
        addDanceItem.value.splice(index, 1);
      }
   })


};
// 点击搜索 跳到二级页面 请求v-model="input1" 的数据   历史内容的请求
// watch(()=>input1.value, ()=>{})

// const toDanceItem = _.debounce async(click, 500, {
  
//     })

 const toDanceItem = async () => {
//   // 获取输入的内容
  const sad = input1.value;
  // 判断sad是否为空
  if (!sad) {
    return;
  }
  isSearch.value = false;

  //  setTimeout=(()=>{
  //   console.log('111');
  //  },3000);
  // console.log(sad);
  const result = await getSearch(sad);
  console.log(result);
  addResult.value = result.data;
  // 发送历史内容的请求
  const isSad = await getHistory();
  console.log(isSad);
  history.value = isSad.data;
  // 搜索历史添加
  // history.value.push(sad)
};
// 点击二级对话框下的推荐记录跳转到一级页面 追加到addDanceItem
const addChina = (id) => {
  const ChinaId = addResult.value.find((item) => item.id === id);
  // console.log(addId);
  addDanceItem.value.push(ChinaId);
  isSearch.value = true;
  // 清空输入框
  input1.value = "";
};
// 点击返回一级菜单
const isSearchTrue = () => {
  // 返回
  isSearch.value = true;
  // 清空输入框
  input1.value = "";
};
// 兴趣技能点击确定 往菜单栏数组里面push 思路错误
const determine =()=>{
  // 把addDanceItem.value里面的值拿出来给到isFalse 要不然会是数组
  // 把点击选择的兴趣舞蹈push到菜单栏 danceList
  // const addDa = isFalse.value
     
  // isFalse.value = addDa.concat(addDanceItem.name)
  // 点击确定退出对话框
  dialogVisible.value = false
}
// switch 点击时获取id 修改class样式 
const isSwitch =(id)=>{
  fullscreenLoading.value = true
  setTimeout(() => {
    fullscreenLoading.value = false
  }, 500)
 const result = isFalse.value.find(item=>item.id ==id)
    console.log(result);
    isTrue.value = result
    isCut.value =!isCut.value

}
// 加载跟多视频 
const addMore=async()=>{
  quantity.value +=1
}

</script>

<style scoped>
.spanAss {
  color: #7d8090;
  line-height: 65px;
  margin-left: 9px;
  height: 44px;
  overflow: hidden;
}
.disSvg {
  display: flex;
  width: 300px;

  height: 66px;
  background: #f5f7f9;
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 30px;
}
.menu {
  display: flex;
  align-items: center;
  margin: 0 auto;


}

.menu li {
 /* line-height: 40px;
  margin: 0 6%;*/
  
}
.menu li a {
  font-size: 25px;
  text-decoration: none;
  color: #000;
}
.active {
  border-bottom: 3px solid #000;
}

.recommend_list {
  background: #fff;
  position: sticky;
  width: 1200px;
  height: 80px;
  margin: 0 auto;
}
.recommend_list_left {
  /**/
  width: 1000px;
  height: 80px;
  position: absolute;
  left: 100px;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  line-height: 80px;
  color: #7d8090;
  font-size: 16px;
}
.recommend_list_left .channel_item {
  padding: 20px 4px;
  margin: 0 20px;
  text-align: center;
}
.recommend_list_left .channel_item.active {
  color: black;
  border-bottom: 3px solid black;
}
.recommend_list_left span:hover {
  color: black;
}
.recommend_list_right {
  position: absolute;
  display: inline-block;
  right: 0;
   top: -16px; 
  height: 80px;
  vertical-align: middle;
  padding: 0;
  line-height: 80px;
  color: #7d8090;
}
.RecomendVideoWrap {
  width: 100%;
  background-color: rgb(245, 247, 249);
}
.RecomendVideo {
  width: 1200px;
  margin: 0 auto;
  border: 1px solid red;
}
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select,
td {
  margin: 0;
  padding: 0;
}

html,
body {
  font: 16px "microsoft yahei";
  word-wrap: break-word;
}

a,
u,
s,
del {
  color: #666;
  text-decoration: none;
}

fieldset,
a img,
.bor0 {
  border: 0;
}

i,
em,
b {
  font-style: normal;
  font-weight: 100;
}

li {
  list-style: none;
}

img {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}
</style>
